<template>
  <div class="views-container">
    <div class="wlm-form">
      <div class="wlm-form-header">页面自定义设置</div>
      <div class="wlm-form-content" style="font-size:14px;">

            <el-form ref="diy" :model="formFormatData.formData"  size="small" label-width="170px" class="retail-form" label-position="right">
                   <el-form-item label="绑定首页">
                       <el-select v-model="formFormatData.formData.diy.diy_page_id" placeholder="请选择">
                              <el-option
                                v-for="item in fistselectValue"
                                :key="item.diy_page_id"
                                :label="item.name"
                                :value="item.diy_page_id.toString()">
                              </el-option>
                            </el-select>
                   </el-form-item>
                  <el-form-item label="底部菜单设置">
                  <div class="fileItemHeader flex-row flex-align-c">
                      <p class="icon">未选中图标</p>
                      <p class="icon-s">选中图标</p>
                      <p class="text">自定义文字</p>
                    </div>
                      <div class="flex-row flex-align-c"> 
                       <p class="fileName" style="margin: 0 120px 0 20px;">首页</p>
                        <div style="margin: 0 120px 0 20px; position:relative">
                          <i class="el-icon-error" style=" position: absolute;top:0px;right: 0px;color:#fff;cursor:pointer" v-if="formFormatData.formData.diy.bottom.index.unselect_image.length!=0" @click="delbtn('index','unselect_image')"></i>
                        <img class="update-load" v-if="formFormatData.formData.diy.bottom.index.unselect_image.length!=0" width="50" :src="formFormatData.formData.diy.bottom.index.unselect_image.file_path"
                        height="50" @click="uploadColumn('index','unselect_image')"/>
                         <div v-else class="flex-row flex-align-c flex-justify-c update-load" @click="uploadColumn('index','unselect_image')">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </div>
                        </div>
                        <div style="margin:0 0  0 20px;position:relative">
                          <i class="el-icon-error" style=" position: absolute;top:0px;right: 0px;color:#fff;cursor:pointer" v-if="formFormatData.formData.diy.bottom.index.select_image.length!=0" @click="delbtn('index','select_image')"></i>
                        <img class="update-load"   width="50" v-if="formFormatData.formData.diy.bottom.index.select_image.length!=0" :src="formFormatData.formData.diy.bottom.index.select_image.file_path"
                        height="50" @click="uploadColumn('index','select_image')" />
                          <div v-else class="flex-row flex-align-c flex-justify-c update-load" @click="uploadColumn('index','select_image')">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </div>
                        </div>
                        <div style="margin: 0  0 0 200px;">
                          <el-input
                              type="text"
                              placeholder="请输入自定义内容"
                              v-model="formFormatData.formData.diy.bottom.index.text"
                              maxlength="4"
                              show-word-limit
                            >
                            </el-input>
                        </div>
                      </div>
                      <div class="flex-row flex-align-c"> 
                       <p class="fileName" style="margin: 0 120px 0 20px;">分类</p>
                        <div style="margin: 0 120px 0 20px;position:relative">
                           <i class="el-icon-error" style=" position: absolute;top:0px;right: 0px;color:#fff;cursor:pointer" v-if="formFormatData.formData.diy.bottom.category.unselect_image.length!=0" @click="delbtn('category','unselect_image')"></i>
                        <img class="update-load"   width="50" v-if="formFormatData.formData.diy.bottom.category.unselect_image.length!=0" :src="formFormatData.formData.diy.bottom.category.unselect_image.file_path"
                        height="50" @click="uploadColumn('category','unselect_image')" />
                        <div v-else class="flex-row flex-align-c flex-justify-c update-load" @click="uploadColumn('category','unselect_image')">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </div>
                        </div>
                        <div style="margin:0 0  0 20px;position:relative">
                           <i class="el-icon-error" style=" position: absolute;top:0px;right: 0px;color:#fff;cursor:pointer" v-if="formFormatData.formData.diy.bottom.category.select_image.length!=0" @click="delbtn('category','select_image')"></i>
                        <img class="update-load"   width="50" v-if="formFormatData.formData.diy.bottom.category.select_image.length!=0" :src="formFormatData.formData.diy.bottom.category.select_image.file_path"
                        height="50" @click="uploadColumn('category','select_image')" />
                          <div v-else class="flex-row flex-align-c flex-justify-c update-load" @click="uploadColumn('category','select_image')">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </div>
                        </div>
                        <div style="margin: 0  0 0 200px;">
                          <el-input
                              type="text"
                              placeholder="请输入自定义内容"
                              v-model="formFormatData.formData.diy.bottom.category.text"
                              maxlength="4"
                              show-word-limit
                            >
                            </el-input>
                        </div>
                      </div>
                       <div class="flex-row flex-align-c"> 
                       <p class="fileName" style="margin: 0 120px 0 20px;">订单</p>
                        <div style="margin: 0 120px 0 20px;position:relative">
                           <i class="el-icon-error" style=" position: absolute;top:0px;right: 0px;color:#fff;cursor:pointer" v-if="formFormatData.formData.diy.bottom.order.unselect_image.length!=0" @click="delbtn('order','unselect_image')"></i>
                        <img class="update-load"   width="50" v-if="formFormatData.formData.diy.bottom.order.unselect_image.length!=0" :src="formFormatData.formData.diy.bottom.order.unselect_image.file_path"
                        height="50" @click="uploadColumn('order','unselect_image')" />
                          <div v-else class="flex-row flex-align-c flex-justify-c update-load" @click="uploadColumn('order','unselect_image')">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </div>
                        </div>
                     <div style="margin:0 0  0 20px;position:relative">
                           <i class="el-icon-error" style=" position: absolute;top:0px;right: 0px;color:#fff;cursor:pointer" v-if="formFormatData.formData.diy.bottom.order.select_image.length!=0" @click="delbtn('order','select_image')"></i>
                        <img class="update-load"   width="50" v-if="formFormatData.formData.diy.bottom.order.select_image.length!=0" :src="formFormatData.formData.diy.bottom.order.select_image.file_path"
                        height="50" @click="uploadColumn('order','select_image')" />
                          <div v-else class="flex-row flex-align-c flex-justify-c update-load" @click="uploadColumn('order','select_image')">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </div>
                        </div>
                        <div style="margin: 0  0 0 200px;">
                          <el-input
                              type="text"
                              placeholder="请输入自定义内容"
                              v-model="formFormatData.formData.diy.bottom.order.text"
                              maxlength="4"
                              show-word-limit
                            >
                            </el-input>
                        </div>
                      </div>
                  </el-form-item>
                   <el-form-item label="分类页面社群">
                                <el-select v-model="formFormatData.formData.diy.community_id" placeholder="请选择社群" style="width:200px;">
                                  <el-option v-for="item in selectValue" :key="item.id" :label="item.title" :value="item.id.toString()"></el-option>
                              </el-select>
                   </el-form-item>
                    <el-form-item label="提货码">
                          <el-input
                              type="text"
                              placeholder="请输入内容"
                              v-model="formFormatData.formData.diy.goods_code.text"
                              maxlength="4"
                              show-word-limit
                            >
                            </el-input>
                        <div style="position:relative">
                                <i class="el-icon-error" style=" position: absolute;top:10px;left:36px;color:#fff;cursor:pointer" v-if="formFormatData.formData.diy.goods_code.image.length!=0" @click="delbtn('goods_code','image')"></i>
                              <img class="update-load" width="50" v-if="formFormatData.formData.diy.goods_code.image.length!=0" :src="formFormatData.formData.diy.goods_code.image.file_path"
                              height="50" @click="uploadColumn1" style="margin-top:10px;" />
                              <div v-else class="flex-row flex-align-c flex-justify-c update-load" @click="uploadColumn1" style="margin-top:10px;">
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                              </div>
                        </div>
                    </el-form-item>
                     <el-form-item label="团长中心">
                          <div style="display:flex;">
                          <el-input
                              type="text"
                              placeholder="请输入内容"
                              v-model="formFormatData.formData.diy.team_leader.text"
                              maxlength="4"
                              show-word-limit
                            >
                            </el-input>
                        </div>
                        <div style="position:relative">
                            <i class="el-icon-error" style=" position: absolute;top:10px;left:36px;color:#fff;cursor:pointer" v-if="formFormatData.formData.diy.team_leader.image.length!=0" @click="delbtn('team_leader','image')"></i>
                              <img class="update-load" width="50" v-if="formFormatData.formData.diy.team_leader.image.length!=0" :src="formFormatData.formData.diy.team_leader.image.file_path"
                              height="50" @click="uploadColumn2" style="margin-top:10px;" />
                              <div v-else class="flex-row flex-align-c flex-justify-c update-load" @click="uploadColumn2" style="margin-top:10px;">
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                              </div>
                        </div>
                     </el-form-item>
                      <el-form-item label="申请团长">
                          <div style="display:flex;">
                          <el-input
                              type="text"
                              placeholder="请输入内容"
                              v-model="formFormatData.formData.diy.apply_team_leader.text"
                              maxlength="4"
                              show-word-limit
                            >
                            </el-input>
                        </div>
                        <div style="position:relative">
                            <i class="el-icon-error" style=" position: absolute;top:10px;left:36px;color:#fff;cursor:pointer" v-if="formFormatData.formData.diy.apply_team_leader.image.length!=0" @click="delbtn('apply_team_leader','image')"></i>
                              <img class="update-load" width="50" v-if="formFormatData.formData.diy.apply_team_leader.image.length!=0" :src="formFormatData.formData.diy.apply_team_leader.image.file_path"
                              height="50" @click="uploadColumn3" style="margin-top:10px;" />
                              <div v-else class="flex-row flex-align-c flex-justify-c update-load" @click="uploadColumn3" style="margin-top:10px;">
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                              </div>
                        </div>
                     </el-form-item>
            </el-form>
      </div>
    </div>
    <div class="wlm-form">
      <choose-files ref="chooseFilesIcon" :config="chooseFilesConfig" :changeEvt="uploadChange"></choose-files>
      <choose-files ref="chooseFilesIcon1" :config="chooseFilesConfig" :changeEvt="uploadChange1"></choose-files>
      <choose-files ref="chooseFilesIcon2" :config="chooseFilesConfig" :changeEvt="uploadChange2"></choose-files>
      <choose-files ref="chooseFilesIcon3" :config="chooseFilesConfig" :changeEvt="uploadChange3"></choose-files>
      <div class="wlm-form-header">基础设置</div>
      <div class="wlm-form-content">
        <el-form ref="base" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="170px" class="retail-form" label-position="right">
          <!-- <el-form-item label="是否开启社区团购">
            <el-switch v-model="formFormatData.formData.base.is_open" active-value="1" inactive-value="2"></el-switch>
            <div class="form-help">开启社区团购会使当前渠道进入社区团购模式，也可使用多渠道来与商城模式一起使用</div>
          </el-form-item> -->
           <el-form-item label="分享图">
                   <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="sendLogoA"></choose-files>
                <div class="form-help">建议尺寸：100*100</div>
           </el-form-item>
              <el-form-item label="分享标题">
                  <el-input v-model="formFormatData.formData.base.share_title" placeholder="请输入分享标题"></el-input>
           </el-form-item>
              <el-form-item label="分享描述">
                  <el-input v-model="formFormatData.formData.base.share_text" placeholder="请输入分享描述"></el-input>
           </el-form-item>
          <el-form-item label="是否开启团长申请">
            <el-switch v-model="formFormatData.formData.base.is_apply" active-value="1" inactive-value="2"></el-switch>
          </el-form-item>
          <!-- <el-form-item label="是否开启申请团长:">
            <el-switch v-model="formFormatData.formData.open_apply" active-value="1" inactive-value="2"></el-switch>
          </el-form-item> -->
          <el-form-item label="移动端是否展示团长权益">
            <el-switch v-model="formFormatData.formData.base.is_equity" active-value="1" inactive-value="2"></el-switch>
          </el-form-item>
          <!-- <el-form-item label="活动渠道" prop="base.source">
            <el-checkbox-group v-model="formFormatData.formData.base.source">
              <el-checkbox label="2" v-if="JSON.stringify($store.getters.power).indexOf('wxapp')>-1">微信小程序</el-checkbox>
              <el-checkbox label="3" v-if="JSON.stringify($store.getters.power).indexOf('H5')>-1">H5</el-checkbox>
              <el-checkbox label="4" v-if="JSON.stringify($store.getters.power).indexOf('wechat')>-1">微信公众号</el-checkbox>
              <el-checkbox label="7" v-if="JSON.stringify($store.getters.power).indexOf('aliapp')>-1">支付宝小程序</el-checkbox>
              <el-checkbox label="9" v-if="JSON.stringify($store.getters.power).indexOf('toutiaoapp')>-1">抖音-头条</el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->
          <el-form-item label="默认团长佣金类型设置">
            <el-radio-group v-model="formFormatData.formData.base.commission_type">
              <el-radio label="1">百分比</el-radio>
              <el-radio label="2">固定金额</el-radio>
            </el-radio-group>
            <div class="form-help">商品未设置单独佣金则使用默认佣金设置，百分比：按订单实付金额 * 百分比，固定佣金：购买商品个数 * 固定佣金</div>
          </el-form-item>
          <el-form-item label="团长佣金比例或金额" prop="base.commission_money">
            <el-input v-model="formFormatData.formData.base.commission_money">
              <template slot="append">{{formFormatData.formData.base.commission_type==1?'%':'元'}}</template>
            </el-input>
          </el-form-item>
            <el-form-item label="团长备货几天后自动收货" >
            <el-input v-model="formFormatData.formData.base.self_receiving">
              <template slot="append">{{'天'}}</template>
            </el-input>
            <div class="form-help">注：填0代表关闭</div>
          </el-form-item>
          <!-- <el-form-item label="团长社区覆盖范围距离" prop="base.range">
            <el-input v-model="formFormatData.formData.base.range">
              <template slot="append">公里</template>
            </el-input>
          </el-form-item> -->
          <el-form-item label="团长权益">
            <ueditor :ueditorChange="contentInfoChange" :ueditorList="ueditorList" :bindIndex="0" :defaultMsg="formFormatData.formData.base.equity" :config="{initialFrameWidth: null,initialFrameHeight: 350}" ref="content"></ueditor>
          </el-form-item>

        </el-form>
      </div>
    </div>

    <div class="wlm-form">
      <div class="wlm-form-header">提现设置</div>
      <div class="wlm-form-content">
        <el-form ref="cash_out" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="170px" class="retail-form" label-position="right">
          <el-form-item label="提现审核">
            <el-radio-group v-model="formFormatData.formData.cash_out.apply_type.type">
              <el-radio label="1" @click.native="formFormatData.formData.cash_out.apply_type.value = ''">后台审核</el-radio>
              <el-radio label="2">
                销售数量达 <el-input-number class="wlm-input-auto" placeholder="" :precision="0" v-if="formFormatData.formData.cash_out.apply_type.type == 2" :controls="false"  v-model.number="formFormatData.formData.cash_out.apply_type.value" style="width:120px;margin-top:24px;" :min="0"></el-input-number> 单无需审核
              </el-radio>
              <el-radio label="3">已提现达<el-input-number class="wlm-input-auto" placeholder="" :precision="2" v-if="formFormatData.formData.cash_out.apply_type.type == 3" :controls="false" v-model.number="formFormatData.formData.cash_out.apply_type.value" style="width:120px;margin-top:24px;" :min="0"></el-input-number> 元无需审核
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="提现手续费" prop="cash_out.cash_rate">
            <el-input v-model="formFormatData.formData.cash_out.cash_rate" placeholder="提现手续费"></el-input>
            <div class="form-help">如提现手续费10%，那么团长提现100元，平台收手续费10元，填0则无</div>

          </el-form-item>
          <!-- <el-form-item label="最低提现多少元:"  prop="cash_out.min_cash_money">
            <el-input v-model="formFormatData.formData.cash_out.min_cash_money" placeholder="最低提现多少元"></el-input>
          </el-form-item> -->
          <el-form-item label="佣金满多少元可提现" prop="cash_out.satisfy_money">
            <el-input v-model="formFormatData.formData.cash_out.satisfy_money" placeholder="佣金满多少元可提现"></el-input>

          </el-form-item>
          <el-form-item label="满多少代理订单可提现" prop="cash_out.satisfy_order_num">
            <el-input v-model="formFormatData.formData.cash_out.satisfy_order_num" placeholder="满多少代理订单可提现"></el-input>
          </el-form-item>

        </el-form>
      </div>
    </div>
    

    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" type="primary" @click="saveForm">保存</el-button>
      <!--  @click="saveForm" -->
    </div>

  </div>

</template>

<script>
// import { checkNumberAnddDecimal } from '@utils/validate'
import ChooseFiles from '@/components/ChooseFiles/index'
import { reggetsetting, regsavesetting, checkArrhasData,pageAll } from '@/api/commityBuy'
import { checkPositiveInteger, checkNumberAnddDecimal } from '@/utils/validate'
import {
    servicesList
} from '@/api/merchant'
import mixins from '@/mixins/mixins'
import ueditor from '@/components/Ueditor/index'

export default {
  mixins: [mixins.getters('Form')],
   components: {
    ueditor,
    ChooseFiles
  },
  data() {
    return {
      index_1:'',
      index_2:'',
      ueditorList: [],
      infoMsg: '',
      $index:-1,
      selectValue:[],
      fistselectValue:[],
      chooseFilesConfig: {
        type: ['image'],
        model: 'normal',
        initList: [],
        file_type: 'image'
      },
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'share_image',
        bindKey: {
          key: '',
          model: 'img'
        }
      },
      formFormatData: {
        key: ['base', 'cash_out','diy'],
        api: {
          editForm: {
            api: reggetsetting,
            params: {
              always: true
            },
            filters: {
              img: {
                bindInit: ['']
              }
            }
          },
          submitForm: regsavesetting
        },
        formData: {
          base: {
            is_open: 1,
            source: [],
            is_apply: 1,
            open_apply: 1,
            commission_type: 1,
            range: 1,
            is_equity: 1,
            equity: '',
            commission_money: '',
            self_receiving:'',
            share_image:[],
            share_title:'',
            share_text:'',
          },
          cash_out: {
            apply_type: {
              type: '',
              value: ''
            },
            cash_rate: '',
            min_cash_money: '',
            satisfy_money: '',
            satisfy_order_num: ''
          },
          diy:{
              bottom:[],
              community_id:'',
              goods_code:[],
              diy_page_id:'',
              team_leader:[],
          },
        },
        rules: {
          base: {
            commission_money: [{ validator: checkNumberAnddDecimal, message: '请输入大于等于0的数', trigger: 'blur' }],
            range: [{ validator: checkNumberAnddDecimal, message: '请输入大于等于0的数', trigger: 'blur' }],
            source: [{ required: true, message: '选择活动渠道', trigger: 'blur' }]
          },
          cash_out: {
            cash_rate: [{ validator: checkNumberAnddDecimal, message: '请输入大于等于0的数', trigger: 'blur' }],
            min_cash_money: [{ validator: checkNumberAnddDecimal, message: '请输入大于等于0的数', trigger: 'blur' }],
            satisfy_money: [{ validator: checkNumberAnddDecimal, message: '请输入大于等于0的数', trigger: 'blur' }],
            satisfy_order_num: [{ validator: checkPositiveInteger, message: '请输入大于等于0的整数', trigger: 'blur' }]
          }
        }
      }
    }
  },
 
  created() {
    this.$nextTick(() => {
      // let a= Object.values()
      this.communitybtn()
      this.pageAllbtn()

    })
  },
  mounted() {
  },
  methods: {
    delbtn(val,name){
      if(val == 'index' && name=='unselect_image'){
       this.formFormatData.formData.diy.bottom.index.unselect_image = []
      }
      if(val == 'index' && name =='select_image'){
        this.formFormatData.formData.diy.bottom.index.select_image = []
      }

      if(val == 'category' && name=='unselect_image'){
       this.formFormatData.formData.diy.bottom.category.unselect_image = []
      }
      if(val == 'category' && name =='select_image'){
        this.formFormatData.formData.diy.bottom.category.select_image = []
      }

       if(val == 'order' && name=='unselect_image'){
       this.formFormatData.formData.diy.bottom.order.unselect_image = []
      }
      if(val == 'order' && name =='select_image'){
        this.formFormatData.formData.diy.bottom.order.select_image = []
      }
      if(val == 'goods_code' && name =='image'){
        this.formFormatData.formData.diy.goods_code.image = []
      }
      if(val == 'team_leader' && name =='image'){
        this.formFormatData.formData.diy.team_leader.image = []
      }
      if(val == 'apply_team_leader' && name =='image'){
        this.formFormatData.formData.diy.apply_team_leader.image = []
      }
    },
    saveForm() {
      // if (!this.formFormatData.formData.base.source || (!this.formFormatData.formData.base.source.length)) {
      //   this.$message.error('请选择活动渠道')
      //   return false
      // }
      if(!Array.isArray(this.formFormatData.formData.base.share_image)){
         this.$message.error('请选择分享图！')
        return false
      }
      // if(this.formFormatData.formData.diy.bottom.index.unselect_image.length==0 || this.formFormatData.formData.diy.bottom.index.select_image.length==0 || formFormatData.formData.diy.bottom.index.text){

      // }
      if(this.formFormatData.formData.diy.diy_page_id==''){
        this.$message.error('请绑定首页！')
        return false
      }

      this.formFormatSubmit()
    },
     //请求社群接口
        communitybtn() {
            servicesList({
                list_rows: 'all'
            }).then(res => {
                this.selectValue = res.data.data
            })
        },
        pageAllbtn(){
          pageAll().then(res=>{
            this.fistselectValue = res.data.data
          })
        },
    contentInfoChange(msg) {
      this.formFormatData.formData.base.equity = msg
    },
    uploadColumn(index_1,index_2){
      this.index_1 = index_1;//第一个下标
      this.index_2 = index_2;//第二个下标
      this.$refs.chooseFilesIcon.toggle()
    },
   
    uploadChange({ displayData = [] },val) {
       //点击未选中图标赋值
      this.formFormatData.formData.diy.bottom[this.index_1][this.index_2] = displayData[0]
    },
      uploadColumn1(){
      this.$refs.chooseFilesIcon1.toggle()
    },
    uploadColumn2(){
      this.$refs.chooseFilesIcon2.toggle()
    },
    uploadColumn3(){
      this.$refs.chooseFilesIcon3.toggle()
    },
    uploadChange1({ displayData = [] },val) {
       //点击未选中图标赋值
      this.formFormatData.formData.diy.goods_code.image = displayData[0]
    },
    uploadChange2({ displayData = [] },val) {
       //点击未选中图标赋值
      this.formFormatData.formData.diy.team_leader.image = displayData[0]
    },
    uploadChange3({ displayData = [] },val) {
       //点击未选中图标赋值
      this.formFormatData.formData.diy.apply_team_leader.image = displayData[0]
    },
    sendLogoA() {
      const arg = arguments
      this.formFormatData.formData.base.share_image = arg[0]['displayData']
    },
    formFormatCallBack(data, type, response){
        // this.$nextTick(() => {
        //   // this.$refs.chooseGoods.displayData = response.data.data.base.share_image
        // })
        this.chooseLogoConfig.initList = response.data.data.base.share_image
    }
  }

}
</script>

<style lang="scss" scoped>
$update: 50px;
.fileItem {
    height: 66px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    font-size: 14px;
    border-radius: 3px;

    .fileName {
      text-align: right;
      width: 170px;
      padding-right: 20px;
      line-height: 60px;
    }
  }
.fileItemHeader {
    height: 66px;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-size: 14px;

    .icon {
      margin-left: 170px;
      width: 70px;
    }

    .text {
      margin-left: 16px;
      width: 270px;
    }

    .icon-s {
      margin-left: 16px;
      width: 290px;
    }
  }
  .update-load {
    display: inline-block;
    cursor: pointer;
    width: $update;
    height: $update;
    background: #fafbff;
    border: 1px dashed #c0ccda;
    color: #a8abb0;
    border-radius: 5px;

    i {
      font-size: 14px;
      color: #8c939d;
      width: $update;
      height: $update;
      line-height: $update;
      text-align: center;
    }
  }
</style>
